<template>
  <view class="box">
    <div class="header"></div>
    <div class="mian"></div>
    <div class="box1">
      <div class="hezi">
        <div class="tou">
          <!-- 文字 -->
          <div style="width: 40%; padding: 10px 15px;line-height: 34px; font-size: 14px;">
            <div>{{ values?.company }}</div>
            <div style="font-size: 24px;">{{ values?.name }}</div>
            <div>
              <uni-icons type="phone-filled" size="14"></uni-icons>
              {{ values?.mobile }}
            </div>
            <div style="white-space: nowrap; font-size: 12px;">
              <uni-icons type="location" size="14"></uni-icons>
              南天门蓬莱东路105号北50米
            </div>
          </div>
          <!-- 图片 -->
          <div style="width: 60%;overflow: hidden;">
            <image
              src="https://img1.baidu.com/it/u=2578525278,2681164481&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701363600&t=67b1355e63e37f96e51f88762cb7a884"
              mode="widthFix" />
          </div>
        </div>
        <!-- tab -->
        <view class="list">
          <div>
            <span style="margin-right: 20px;" v-for="(item, index) in arr" :key="index"
              :class="active == index ? 'a' : ''" @click="Tab(index)">{{
                item }}</span>
            <span style="float: right;">房源: <span style="color: #0c0c0c;">{{ num }}</span>
            </span>
          </div>
          <div class="LIST" v-show="active === 0">
            <div class="LIST_item" v-for="(item, index) in Data" :key="index">
              <div style="margin-right: 10px;">
                <image style="width: 150px;border-radius: 10px;" :src="item.img" mode="widthFix" />
              </div>
              <div style="font-size: 12px;line-height: 28px;">
                <div class="wenben" style="width: 100%;font-size: 16px;">{{ item.name }}</div>
                <div style="margin-top: 20px;">{{ item.house_type }}1卫 | {{ item.extent }}m²&nbsp;<span>{{ item.resident
                }}</span>
                </div>
                <div><span style="font-size: 14px;color: #ed7e7b;">{{ item.price }}</span> 万&nbsp;{{ Math.floor(item.price
                  / item.extent) }}k/m²&nbsp;<span style="font-size: 10px;">{{ item.create_time
  }}天前</span>
                </div>
              </div>
            </div>
          </div>
          <div class="LIST" v-show="active === 1">
            <div class="LIST_item" v-for="(item, index) in Data" :key="index">
              <div style="margin-right: 10px;">
                <image style="width: 150px;border-radius: 10px;" :src="item.img" mode="widthFix" />
              </div>
              <div style="font-size: 12px;line-height: 28px;">
                <div class="wenben" style="font-size: 16px;">{{ item.name }}</div>
                <div style="margin-top: 20px;">{{ item.house_type }}1卫 | {{ item.extent }}m²&nbsp;<span>{{ item.resident
                }}</span>
                </div>
                <div><span style="font-size: 16px;color: #ed7e7b;">{{ item.price }}</span> 万&nbsp;{{ Math.floor(item.price
                  / item.extent) }}k/m²&nbsp;<span style="font-size: 10px;">{{ item.create_time
  }}天前</span>
                </div>
              </div>
            </div>
          </div>
          <view class="goods-carts">
            <button ref='myButton' style="display: none;" open-type="share">分享</button>
            <uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
              @buttonClick="buttonClick" />
          </view>
        </view>
      </div>
    </div>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, onMounted } from 'vue';
// 跳湖
const options = [{

}, {
  icon: 'redo-filled',
  text: '分享'
}, {

}]
const buttonGroup = [{
  text: '在线咨询',
  backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  color: '#fff'
},
{
  text: '电话咨询',
  backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  color: '#fff'
}
]
// 分享
const myButton = ref(null);
const onClick = () => {
  // myButton()
  console.log(myButton);
  // console.log(1);
  // uni.showShareMenu({
  //   withShareTicket: false,
  //   menus: ['shareAppMessage', 'shareTimeline'],
  //   title: '分享可靠的经纪人',
  //   content: '快来跟经纪人一起寻找适合自己的舒适的家吧',
  //   imageUrl: 'https://img1.baidu.com/it/u=2578525278,2681164481&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701450000&t=b39be2dc75c96fdef0234da1b239323c',
  //   success: (res) => {
  //     console.log(res);
  //   },
  //   fail: (res) => {
  //     console.log(res);
  //   }
  // })
}

const buttonClick = (e) => {
  if (e.index == 0) {
    uni.navigateTo({
      url: '/subpkg/metre/metre?item=' + JSON.stringify(values.value)
    })
  } else if (e.index == 1) {
    uni.makePhoneCall({
      phoneNumber: values.value.mobile,
      success: (res) => {
        console.log(values.value.mobile)
      },
      fail: (fail) => {
        console.log(fail);
      },
    })
  }
}
// tab、
const active = ref(0)
const arr = ['卖房', '租房'];
const Tab = (index) => {
  active.value = index
  if (arr[index] == '卖房') {
    num.value = Math.ceil((values.value?.first_hand_house * 1 + values.value?.second_hand_house * 1) / 10);
    uni.request({
      url: 'http://10.31.71.52:7002/housing',
      method: 'GET',
      data: {
        currentPage: '8',
        pageSize: num.value
      },
      success: (res) => {
        Data.value = []
        res.data.data.forEach(t => {
          let newDATE = newDate();
          let oldDATE = oldDate(t.create_time)
          const millisecondsPerDay = 24 * 60 * 60 * 1000;
          const days = Math.floor((newDATE - oldDATE) / millisecondsPerDay);
          t.create_time = days
          Data.value.push(t)
        });
      },
    })
  } else {
    num.value = Math.ceil(values.value?.lease_house * 1 / 10)
    uni.request({
      url: 'http://10.31.71.52:7002/second/housing',
      method: 'GET',
      data: {
        currentPage: '1',
        pageSize: num.value
      },
      success: (res) => {
        Data.value = []
        res.data.data.forEach(t => {
          let newDATE = newDate();
          let oldDATE = oldDate(t.create_time)
          const millisecondsPerDay = 24 * 60 * 60 * 1000;
          const days = Math.floor((newDATE - oldDATE) / millisecondsPerDay);
          t.create_time = days
          Data.value.push(t)
        });
      },
    })
  }
}
// 经纪人数据
const values = ref();
const num = ref();
onLoad((item) => {
  values.value = JSON.parse(item.item);
  num.value = Math.ceil((values.value?.first_hand_house * 1 + values.value?.second_hand_house * 1) / 10);
})
// /housing
const Data = ref([]);
onMounted(() => {
  uni.request({
    url: 'http://10.31.71.52:7002/housing',
    method: 'GET',
    data: {
      currentPage: '8',
      pageSize: num.value
    },
    success: (res) => {
      res.data.data.forEach(t => {
        let newDATE = newDate();
        let oldDATE = oldDate(t.create_time)
        const millisecondsPerDay = 24 * 60 * 60 * 1000;
        const days = Math.floor((newDATE - oldDATE) / millisecondsPerDay);
        t.create_time = days
        Data.value.push(t)
      });
    },
  })
})
// 时间差计算当前的年月日
const newDate = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1; // 月份是从 0 开始计数的，需要加 1
  const day = now.getDate();
  const sj = `${year}-${month}-${day}`
  const Time = Date.parse(sj)
  return Time
}
// 传过来的时间
const oldDate = (date) => {
  const timer = String(date);
  const newTimer = timer.slice(0, 10)
  const Time = Date.parse(newTimer)
  return Time
}

</script>

<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  background: #1a88f6;
  overflow: hidden;

  .header {
    width: 100%;
    height: 200px;

  }

  .mian {
    width: 500%;
    height: 500%;
    background: #fff;
    border-radius: 50%;
    position: relative;
    left: -250%;
    top: -265%;
    transform: translate(9.6%, 50%);
    z-index: 0;
  }

  .box1 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;

    .hezi {
      width: 85%;
      margin: auto;
      height: 100%;

      .tou {
        display: flex;
        margin-top: 20px;
        width: 100%;
        height: 150px;
        background: #fff;
        box-shadow: 0 0 2px 2px #ccc;
        border-radius: 10px;
        overflow: hidden;

        image {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
        }
      }
    }

    .list {
      height: 68%;
      font-size: 14px;
      margin-top: 20px;

      .a {
        font-weight: bold;
        font-size: 16px;
      }

      .LIST {
        height: 85%;
        overflow: auto;
        margin-top: 10px;

        .LIST_item {
          display: flex;
          margin-bottom: 10px;
          width: 100%;
          height: 110px;
          background: #fcfcfc;
          border-radius: 10px;
        }

        .wenben {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .goods-carts {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        /* #ifdef H5 */
        left: var(--window-left);
        right: var(--window-right);
        /* #endif */
        bottom: 0;
      }
    }
  }
}
</style>
